<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue+boostrap 实践 图书管理</title>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.13/vue.js"></script>
    <style>
    </style>
    <script>
        var app;
        window.onload = function () {
            app = new Vue({
                el: '#app',
                methods: {
                    
                    selected: function (book){
                        console.log(book);
                        //*
                        this.book.id = book.id;
                        this.book.name = book.name;
                        this.book.author = book.author;
                        this.book.price = book.price;
                        //*/
                    },
                    addBook: function () {
                        //计算书的id
                        this.book.id = this.books.length + 1;
                        this.books.push(this.book);
                        //将input中的数据重置
                        this.book = {};
                    },
                    delBook: function(book) {
                        var blength = this.books.length;
                        this.books.splice(book.id-1, 1);
                        for( var i = 0; i < blength ; i++) {
                            if(book.id < this.books[i].id) {    
                                this.books[i].id -= 1;
                            }
                        }  
                    },
                    updateBook: function(book) {
                        $("#add-book").css("display","none");
                        $("#update-book").css("display","block");
                        this.book.id = book.id;
                    },
                    updatesBook:function(book) {
                        this.book.id = book.id;
                        this.books.splice(id-1,1,this.book);
                        $("#add-book").css("display","block");
                        $("#update-book").css("display","none");
                        this.book = {};
                    }
                },
                data: {
                    book: {
                        id: 0,
                        author: '',
                        name: '',
                        price: ''
                    },
                    books: [{
                        id: 1,
                        author: '曹雪芹',
                        name: '红楼梦',
                        price: 32.0
                    }, {
                        id: 2,
                        author: '施耐庵',
                        name: '水浒传',
                        price: 30.0
                    }, {
                        id: '3',
                        author: '罗贯中',
                        name: '三国演义',
                        price: 24.0
                    }, {
                        id: 4,
                        author: '吴承恩',
                        name: '西游记',
                        price: 20.0
                    }]
                }
            });
        }
    </script>
</head>

<body>
    <div class="container">
        <div class="col-md-6 col-md-offset-3">
            <h1>Vue 示例</h1>
            <div id="app">
                <table class="table table-hover">
                    <caption></caption>
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>书名</th>
                            <th>作者</th>
                            <th>价格</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-cloak v-for="book in books" @click="selected(book)">
                            <td>{{book.id}}</td>
                            <td>{{book.name}}</td>
                            <td>{{book.author}}</td>
                            <td>{{book.price}}</td>
                            <template v-if="book.id%2==0">
                                <td class="text-left">
                                    <button type="button" class="btn btn-success" @click="delBook(book)" class="del">删除</button>
                                    <button type="button" class="btn btn-success" @click="updateBook(book)">修改</button>
                                </td>
                            </template>
                            <template v-else>
                                <td class="text-left">
                                    <button type="button" class="btn btn-danger" @click="delBook(book)" class="del">删除</button>
                                    <button type="button" class="btn btn-danger" @click="updateBook(book)">修改</button>
                                </td>
                            </template>
                        </tr>
                    </tbody>
                </table>

                <div id="add-book">
                    <legend>添加书籍</legend>
                    <div class="form-group">
                        <label for="group">书名</label>
                        <input type="text" class="form-control" id="group" v-model="book.name">
                    </div>
                    <div class="form-group">
                        <label for="author">作者</label>
                        <input type="text" class="form-control" id="author" v-model="book.author">
                    </div>
                    <div class="form-group">
                        <label for="price">价格</label>
                        <input type="text" class="form-control" id="price" v-model="book.price">
                    </div>
                    <button class="btn btn-primary btn-block" v-on:click="addBook()">添加</button>
                    <button class="btn btn-primary btn-block" v-on:click="searchBook()">查询</button>
                </div>

                <div id="update-book">
                    <legend>修改书籍</legend>
                    <div class="form-group">
                        <label for="group1">书名</label>
                        <input type="text" class="form-control" id="group1" v-model="book.name">
                    </div>
                    <div class="form-group">
                        <label for="author1">作者</label>
                        <input type="text" class="form-control" id="author1" v-model="book.author">
                    </div>
                    <div class="form-group">
                        <label for="price1">价格</label>
                        <input type="text" class="form-control" id="price1" v-model="book.price">
                    </div>
                    <button class="btn btn-primary btn-block" v-on:click="updatesBook()">完成</button>
                </div>
            </div>
        </div>
    </div>

</body>

</html>